<template>
	<view class="partner">
		<view class="from">
			<p>欢迎加入我们！</p>
			<view>
				<p><span>姓名:</span><input type="text" v-model="formData.username"></p>
				<p><span>手机号:</span><input type="text" maxlength="11" v-model="formData.mobile"></p>
				<p><span>店铺名:</span><input type="text" v-model="formData.shop_name"></p>
				<p @click='showCityPicker'>意向合作城市:<input disabled type="text" v-model="formData.address"></p>
			</view>
			<p>请上传营业执照~</p>
			<view>
				<image v-if="img" :src="img" @click="Image" mode="widthFix"></image>
				<view class="view" @click="Image" v-if="!img">
					<image src="../../../../static/technician/71.png"></image>上传图片
				</view>
			</view>
		</view>
		<button @click="confirm">提交</button>
		<cityPicker :formData="formData" ref="cityPicker"></cityPicker>
	</view>
</template>

<script>
	import cityPicker from '@/components/city_picker/city_picker.vue'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				show: false,
				img: '',
				columns: [
					[{
						sex: '男',
						indnx: 1
					}, {
						sex: '女',
						indnx: 0
					}]
				],
				formData: {
					username: "",
					mobile: "",
					shop_name: "",
					business_img: "",
					province_id: 0,
					city_id: 0,
					area_id: 0,
					// 扩展字段
					id: 0,
					address: "",
				},
			};
		},
		methods: {
			showCityPicker() {
				this.$refs.cityPicker.handleShow();
			},
			cancel() {
				this.show = false
			},
			confirm() {
				this.$httpRequest('/partner/savePartnerInfo', this.formData).then(res => {
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
				});
			},
			Image() {
				uni.showLoading();
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.img = res.tempFilePaths[0];
						let uniImg = that.img;
						uni.uploadFile({
							url: that.$baseUrl + '/image/upload',
							filePath: uniImg,
							name: 'image',
							header: {
								'token': uni.getStorageSync('userToken')
							},
							success: res => {
								let result = JSON.parse(res.data);
								that.formData.business_img = result.data;
							},
							complete:()=>{
								uni.hideLoading();
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.partner {
		color: #333;

		&>.from {
			width: 690rpx;
			margin: 0 auto;

			&>p {
				font-size: 15px;
				margin: 32rpx 0 32rpx 20rpx;
			}

			&>view {
				width: 100%;
				background: #fff;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				&>image {
					width: 242rpx;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>.view {
					width: 194rpx;
					height: 194rpx;
					border-radius: 5px;
					border: 1px dashed #BCBCBC;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 12px;
					color: #9E9E9E;
					margin: 20rpx;

					&>image {
						width: 40rpx;
						height: 36rpx;
						margin-bottom: 10rpx;
						image-rendering: -moz-crisp-edges;
						image-rendering: -o-crisp-edges;
						image-rendering: -webkit-optimize-contrast;
						image-rendering: crisp-edges;
						-ms-interpolation-mode: nearest-neighbor;
					}
				}

				&>p {
					width: 100%;
					height: 78rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;
					font-size: 13px;
					color: #9E9E9E;

					&>button {
						width: 172rpx;
						height: 50rpx;
						font-size: 15px;
						background: #6AB650;
						color: #fff;
						line-height: 50rpx;
						padding: 0;
					}

					&>span {
						width: 100rpx;
					}

					&>input {
						flex: 1;
						height: 100%;
						font-size: 13px;
						padding-left: 20rpx;
					}
				}
			}
		}

		&>button {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: #5FC07B;
			font-size: 15px;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>